<template>
	<view class="goods-detail">
		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<view class="swiper-item">
						<image style="width: 100%;" :src="item.img" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<uni-card margin="0" padding="5">
			<text class="goods-title">家务特厚手套 100只盒装手套 买一送一</text>
			<view class="xiaolang mt-5">
				销量:<text class="danger">8886</text>
			</view>
			<view class="goods-text-com mt-5">
				<view class="gitem">
					销售价:<text class="danger">￥8886</text>
				</view>
				<view class="gitem">
					赚多少:<text class="danger">￥8333</text>
				</view>
				<view class="gitem">
					佣金比例:<text class="danger">8886%</text>
				</view>
			</view>
		</uni-card>
		<view class="mt-10">
			<uni-card margin="0" padding="5" class="mt-10">
				<text class="card-title mt-5">店铺评分</text>
				<view class="goods-text-com mt-5">
					<view class="gitem">
						商品体验:<text class="danger">4.88</text>
					</view>
					<view class="gitem">
						商家服务:<text class="danger">4.88</text>
					</view>
					<view class="gitem">
						物流体验:<text class="danger">4.95</text>
					</view>
				</view>
			</uni-card>
		</view>
		<tab-nav :navs="navs" @navChange="navChange" :active.sync="navActive"></tab-nav>
		<view class="bottomCom" id="goodsInfo">
			商品详情
		</view>
		<view style="height: 100rpx;" id="afterSale">
			发货与售后
		</view>
		<view class="bottomCom" id="dataPack">
			资料包
		</view>

		<view class="goods-carts">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="fontLogoClick"
				@buttonClick="buttonClick"/>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				navActive: 'goodsInfo',
				info: [{
						img: 'https://img0.baidu.com/it/u=2397537314,1983960212&fm=253&fmt=auto&app=120&f=JPG?w=500&h=211'
					},
					{
						img: 'https://img1.baidu.com/it/u=2632801269,297695098&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=210'
					},
					{
						img: 'https://img1.baidu.com/it/u=1226799645,1386954317&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=350'
					},
				],
				current: 0,
				mode: 'round',

				options: [{
						icon: 'home-filled',
						text: '首页'
					}, {
						icon: 'star-filled',
						text: '收藏',
						info: 2,
						infoBackgroundColor: '#007aff',
						infoColor: "#f5f5f5"
					},
					{
						icon: 'paperclip',
						text: '复制链接'
					},
					{
						icon: 'redo',
						text: '分享'
					},
				],
				buttonGroup: [{
					text: '免费拿样',
					backgroundColor: '#007aff',
					color: '#fff'
				}],
				navs: [{
					label: '商品详情',
					value: 'goodsInfo',
					scrollTop: 0
				}, {
					label: '发货与售后',
					value: 'afterSale',
					scrollTop: 0
				}, {
					label: '资料包',
					value: 'dataPack',
					scrollTop: 0
				}],
				// scrollTo:{goodsInfo:0,afterSale:0,dataPack:0}
			}
		},
		onLoad(e) {
			for (let item of this.navs) {
				uni.createSelectorQuery().select(`#${item.value}`).boundingClientRect(data => {
					item.scrollTop = data.top
				}).exec();
			}
		},
		onPageScroll(e) {
			for (let item of this.navs) {
				if((e.scrollTop-item.scrollTop > -50 && e.scrollTop-item.scrollTop < 50) &&this.navActive != item.value){
					this.navActive = item.value
				}
			}
		},
		methods: {
			navChange(value, row) {
				if (value === this.navAvtive) {
					return
				}
				console.log(row, value)
				uni.pageScrollTo({
					duration: 300, //过渡时间
					scrollTop: row.scrollTop - 35, //到达目标class的top值
				})
				this.navAvtive = value
			},
			change(e) {
				this.current = e.detail.current;
			},
			fontLogoClick(e) {
				const text = e.content.text
				switch(text){
					case '首页':
						uni.switchTab({
						    url: '/pages/index/index'
						});
						break
						
				}
			},
			buttonClick(e) {
				console.log(e)
				this.options[1].info++
			}
		}
	}
</script>
<style scoped lang="scss">
.goods-detail{
	height:100%;
}
	.bottomCom {
		height: 880px;
		background-color: #CCCCCC;
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}

	.goods-title {
		font-size: 34rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
		// -webkit-line-clamp: 1;
	}

	.xiaolang {
		font-size: 30rpx;
	}

	.goods-text-com {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		font-size: 24rpx;
	}
</style>
